<!-- 搜索框，统一样式 -->
<template>
  <view class="searchBody" :class="{'lg': size==='lg', hasBorder: hasBorder}" :style="styleBody">
    <view class="searchBg">
      <u-input
        v-model="keyword"
        :height="height"
        :type="type"
        :focus="focusType"
        :placeholder="placeholder"
        :class="{'searchIconNone': isFocus}"
        style="width: 100%;"
        class="placeholderTC"
        @click="isFocus = true"
        @blur="_blur"
      />
    </view>
  </view>
</template>

<script>
export default {
  props:{
    placeholder: {type: String, default: '请输入关键词搜索'},
    type: {type: String, default: 'text'},
    focusType: {type: Boolean, default: false},
    size: {type: String, default: 'lg' }, // 搜索框的大小，目前有lg、md，后续有需要自己加
    styleBody: {type: String, default: ''},
    hasBorder: {type: Boolean, default: true }
  },
  data(){
    return {
      isFocus: false,
      keyword: '', // 搜索关键词
    }
  },
  watch: {
    keyword(newTxt){
        this.throttle(this.allQueryData, null, 1000, newTxt);
    },
    focusType(flag) {
      if (flag) this.isFocus = flag
    }
  },
  computed: {
    height() {
      if (this.size === 'lg') {
        return 70
      } else if (this.size === 'md') {
        return 64
      }
    }
  },
  methods: {
    // 节流函数
    throttle(fn,context,delay,text){
      clearTimeout(fn.timer);
      fn.timer = setTimeout(() => {
          fn.call(context,text);
      },delay);
    },
    allQueryData(text){
      this.$emit('searchFn',text) // 搜索方法
    },
    // 失焦函数
    _blur(){
      if(!this.keyword){
        this.isFocus = false
      }
      this.$emit('blur')
    }
  }
}
</script>
<style lang="scss" scoped>
.searchBody{
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 32rpx;
  background-color: #FFF;
  &.lg {
    height: 100rpx;
    //box-shadow: inset 0px -1px 0px #EEEEEE;
    .searchBg {
      height: 72rpx;
      background: #F7F8FA;
    }
  }
  &.hasBorder {
    box-shadow: inset 0px -1px 0px #EEEEEE;
  }
  .searchBg{
    width: 100%;
    height: 64rpx;
    padding: 0 32rpx;
    border-radius: 72rpx;
    background-color: #F2F3F5;
  }
}
</style>